<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标题</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app"> 
        <button @click="count++">点击次数：{{count}}</button> 
        <button @click="destroyMe">销毁我</button> 

    </div>

    <script>
        var app=new Vue({
            el:'#app'
            ,data:{
               count:0
            }
            ,methods: {
                destroyMe(){
                    this.$destroy();
                },
                printStatus(status) {   
                    console.group(`------${status}------`)                 
                    if (this.$el) {                
                        console.log('this.$el.outerHTML: ', this.$el.outerHTML)                
                    } else {               
                        console.log('this.$el: ', this.$el)                
                    }               
                    console.log('this.$data: ', this.$data)                
                    console.log('this.count: ', this.count)                
                    console.groupEnd()                 
                } 
            },beforeCreate() { 
                 // 注意此处不能调用 this.printStatus 来打印，因为 Vue 实例还未创建完成                 
                 console.group(`------ [beforeCreate] 创建之前------`)              
                 console.log('this.$el: ', this.$el)                
                 console.log('this.$data: ', this.$data)                
                 console.log('this.count: ', this.count)                
                 console.groupEnd()                 
            },                 
            created() {                
                this.printStatus('[created] 创建完成')                 
            },                 
            beforeMount() {                
                this.printStatus('[beforeMount] 挂载之前')                 
            },                 
            mounted() {                
                this.printStatus('[mounted] 挂载完成')                 
            },                 
            beforeUpdate() {               
                this.printStatus('[beforeUpdate] 修改之前')                
            },                 
            updated() {                
                this.printStatus('[updated] 修改完成')                 
            },                 
            beforeDestroy() {              
                this.printStatus('[beforeDestroy] 销毁之前')               
            },                 
            destroyed() {              
                this.printStatus('[destroyed] 销毁完成')               
            }
        });
    </script>
</body>
</html>